<!--
 * @Description: 活动管理新增编辑页面
 * @Author: liyujie
 * @Date: 2021/2/23
 * @Last Modified by: liyujie
 * @Last Modified time: 2021/07/12
-->
<template>
    <div class="wrapper">
        <div class="content-wrapper">
            <!-- title -->
            <div class="header">
                {{ type === 'edit' ? '编辑活动' : type === 'add' ? '创建活动' : '查看活动' }}
                <div
                    class="back"
                    @click="handleRoute('activityManageList')"
                >返回</div>
            </div>

            <div>
                <div class="form-view">
                    <!--表单-->
                    <el-form
                        :model="ruleForm"
                        :rules="rules"
                        label-position="right"
                        ref="ruleForm"
                        label-width="192px"
                        class="form-wrap"
                        :disabled="type === 'detail'"
                        @submit.native.prevent
                    >
                        <div class="form-title">基本信息</div>
                        <el-form-item
                            label="活动名称"
                            prop="title"
                            class="is-required"
                        >
                            <el-input
                                v-model="ruleForm.title"
                                size="medium"
                                clearable
                                placeholder="请输入活动名称"
                                style="width: 469px"
                                maxlength="20"
                                show-word-limit
                                :disabled="type === 'detail'"
                            />
                        </el-form-item>
                        <el-form-item
                            label="活动banner"
                            prop="image_url"
                            class="is-required"
                        >
                            <el-upload
                                :show-file-list="false"
                                action="noAction"
                                class="upload-view"
                                :http-request="(e) => handleUpload(e, 'image_url')"
                                accept="image/*"
                                drag
                                :disabled="type === 'detail'"
                            >
                                <img
                                    v-if="ruleForm.image_url"
                                    :src="ruleForm.image_url"
                                >
                                <i
                                    class="el-icon-upload"
                                    v-if="!ruleForm.image_url"/>
                                <div
                                    class="el-upload__text"
                                    v-if="!ruleForm.image_url">将文件拖到此处，或<em>点击上传</em></div>
                                <div
                                    class="el-upload__tip"
                                    slot="tip"
                                >
                                    格式支持jpg、png、jpeg；尺寸：3336*456px
                                </div>
                            </el-upload>
                        </el-form-item>
                        <el-form-item
                            label="商家报名时间"
                            prop="apply_start_time"
                            class="is-required"
                        >
                            <div style="display: flex; align-items: center">
                                <el-form-item prop="apply_start_time">
                                    <el-date-picker
                                        v-model="ruleForm.apply_start_time"
                                        type="datetime"
                                        default-time="00:00:00"
                                        size="medium"
                                        placeholder="请选择开始时间"
                                        style="width: 218px"
                                        value-format="timestamp"
                                        :disabled="type === 'detail' || isDisabled"
                                    />
                                </el-form-item>
                                <span style="margin: 0 12px">-</span>
                                <el-form-item prop="apply_end_time">
                                    <el-date-picker
                                        v-model="ruleForm.apply_end_time"
                                        type="datetime"
                                        placeholder="请选择结束时间"
                                        default-time="23:59:59"
                                        size="medium"
                                        style="width: 218px"
                                        value-format="timestamp"
                                        :disabled="type === 'detail' || isDisabled"
                                    />
                                </el-form-item>
                            </div>
                        </el-form-item>
                        <el-form-item
                            label="活动预热时间"
                        >
                            <div style="display: flex; align-items: center">
                                <el-form-item prop="preheating_start_time">
                                    <el-date-picker
                                        v-model="ruleForm.preheating_start_time"
                                        type="datetime"
                                        default-time="00:00:00"
                                        size="medium"
                                        placeholder="请选择开始时间"
                                        style="width: 218px"
                                        value-format="timestamp"
                                        :disabled="type === 'detail' || isDisabled"
                                    />
                                </el-form-item>
                                <span style="margin: 0 12px">-</span>
                                <el-form-item prop="preheating_end_time">
                                    <el-date-picker
                                        v-model="ruleForm.preheating_end_time"
                                        type="datetime"
                                        placeholder="请选择结束时间"
                                        default-time="23:59:59"
                                        size="medium"
                                        style="width: 218px"
                                        value-format="timestamp"
                                        :disabled="type === 'detail' || isDisabled"
                                    />
                                </el-form-item>
                            </div>
                        </el-form-item>
                        <el-form-item
                            label="活动进行时间"
                            prop="activity_start_time"
                            class="is-required"
                        >
                            <div style="display: flex; align-items: center">
                                <el-form-item prop="activity_start_time">
                                    <el-date-picker
                                        v-model="ruleForm.activity_start_time"
                                        type="datetime"
                                        default-time="00:00:00"
                                        size="medium"
                                        placeholder="请选择开始时间"
                                        style="width: 218px"
                                        value-format="timestamp"
                                        :disabled="type === 'detail' || isDisabled"
                                    />
                                </el-form-item>
                                <span style="margin: 0 12px">-</span>
                                <el-form-item prop="activity_end_time">
                                    <el-date-picker
                                        v-model="ruleForm.activity_end_time"
                                        type="datetime"
                                        placeholder="请选择结束时间"
                                        default-time="23:59:59"
                                        size="medium"
                                        style="width: 218px"
                                        value-format="timestamp"
                                        :disabled="type === 'detail'"
                                    />
                                </el-form-item>
                            </div>
                        </el-form-item>
                        <el-form-item
                            label="再次提交截止时间"
                            prop="re_apply_end_time"
                            class="is-required"
                        >
                            <el-date-picker
                                v-model="ruleForm.re_apply_end_time"
                                type="datetime"
                                placeholder="请选择结束时间"
                                default-time="23:59:59"
                                size="medium"
                                style="width: 469px"
                                value-format="timestamp"
                                :disabled="type === 'detail' || isDisabled"
                            />
                            <span class="form-tips">说明：该时间用于商家被驳回后，可执行再次提交操作的截至时间。</span>
                        </el-form-item>
                        <el-form-item
                            label="活动启用状态"
                            class="is-required"
                            style="margin-bottom: 60px"
                        >
                            <el-radio-group
                                v-model="ruleForm.status"
                                :disabled="isDisabled"
                            >
                                <el-radio :label="1">启用</el-radio>
                                <el-radio :label="0">禁用</el-radio>
                            </el-radio-group>
                            <span class="form-tips">说明：启用状态为启用后，报名时间未开始，商家端也会显示，而改为禁用后，活动已经开始，则该活动会被下架</span>
                        </el-form-item>
                        <div class="form-title">
                            APP活动氛围条<span class="form-tips">仅用于用户端展示</span>
                        </div>
                        <el-form-item label="预热期氛围图">
                            <el-upload
                                :show-file-list="false"
                                action="noAction"
                                class="upload-view"
                                :http-request="(e) => handleUpload(e, 'goods_banner_preheating')"
                                :before-upload="beforeUploadImage"
                                accept="image/*"
                                drag
                                :disabled="type === 'detail'"
                            >
                                <img
                                    v-if="ruleForm.goods_banner_preheating"
                                    :src="ruleForm.goods_banner_preheating"
                                >
                                <i
                                    class="el-icon-upload"
                                    v-if="!ruleForm.goods_banner_preheating"/>
                                <div
                                    class="el-upload__text"
                                    v-if="!ruleForm.goods_banner_preheating">将文件拖到此处，或<em>点击上传</em></div>
                                <div
                                    class="el-upload__tip"
                                    slot="tip"
                                >
                                    格式支持jpg、png、jpeg；尺寸：750*128px；大小不可超过500kb
                                </div>
                            </el-upload>
                        </el-form-item>
                        <el-form-item label="活动期间氛围图">
                            <el-upload
                                :show-file-list="false"
                                action="noAction"
                                class="upload-view"
                                :http-request="(e) => handleUpload(e, 'goods_banner_activity')"
                                :before-upload="beforeUploadImage"
                                accept="image/*"
                                drag
                                :disabled="type === 'detail'"
                            >
                                <img
                                    v-if="ruleForm.goods_banner_activity"
                                    :src="ruleForm.goods_banner_activity"
                                >
                                <i
                                    class="el-icon-upload"
                                    v-if="!ruleForm.goods_banner_activity"/>
                                <div
                                    class="el-upload__text"
                                    v-if="!ruleForm.goods_banner_activity">将文件拖到此处，或<em>点击上传</em></div>
                                <div
                                    class="el-upload__tip"
                                    slot="tip"
                                >
                                    格式支持jpg、png、jpeg；尺寸：750*128px；大小不可超过500kb
                                </div>
                            </el-upload>
                        </el-form-item>
                        <div class="form-title">报名商品</div>
                        <el-form-item
                            label="单个商家提报商品数量"
                            prop="apply_limit_count"
                            class="is-required"
                            label-width="204px"
                        >
                            <el-input
                                v-model="ruleForm.apply_limit_count"
                                size="medium"
                                placeholder="请输入商品数量"
                                style="width: 469px"
                                :disabled="type === 'detail' || isDisabled"
                            >
                                <span
                                    slot="suffix"
                                    style="margin-right: 6px"
                                >款</span>
                            </el-input>
                        </el-form-item>
                        <el-form-item
                            label="商家设置佣金比例不能低于"
                            prop="apply_commission_rate_require"
                            class="is-required"
                            label-width="204px"
                        >
                            <el-input
                                v-model="ruleForm.apply_commission_rate_require "
                                size="medium"
                                placeholder="请输入"
                                style="width: 469px"
                                :disabled="type === 'detail' || isDisabled"
                            >
                                <span
                                    slot="suffix"
                                    style="margin-right: 6px"
                                >%</span>
                            </el-input>
                        </el-form-item>
                        <el-form-item
                            label="商品活动价不能高于近30天最低学生价的"
                            prop="apply_max_price_rate_30_days"
                            class="is-required"
                            label-width="276px"
                        >
                            <el-input
                                v-model="ruleForm.apply_max_price_rate_30_days"
                                size="medium"
                                placeholder="请输入"
                                style="width: 168px"
                                :disabled="type === 'detail' || isDisabled"
                            >
                                <span
                                    slot="suffix"
                                    style="margin-right: 6px"
                                >折</span>
                            </el-input>
                        </el-form-item>
                        <el-form-item
                            label="可参与的商品类目"
                            prop="apply_valid_goods_type_nos"
                            class="is-required"
                            label-width="204px"
                        >
                            <div class="type-wrapper">
                                <div class="type-header">
                                    <el-checkbox
                                        :disabled="isDisabled"
                                        @change="handleCheckAll"
                                    >全部类目</el-checkbox>
                                </div>
                                <el-checkbox-group
                                    v-model="typeSelection"
                                    class="type-content"
                                    :disabled="isDisabled"
                                >
                                    <div
                                        class="type-item"
                                        v-for="(item,index) in typeList"
                                        :key="item.no"
                                        @mouseenter="handleClick(item, index)"
                                        @mouseleave="handleLeave(item, index)"
                                    >
                                        <div class="type-label">
                                            <el-checkbox
                                                :label="item.no"
                                                @change="handleChange($event, item, index)"
                                            >
                                                {{ item.title | setNumber }}
                                                <span
                                                    class="type-select-count"
                                                    v-if="item.checkedLength"
                                                >({{ item.checkedLength }})</span>
                                                <i
                                                    class="el-icon-caret-bottom"
                                                    v-if="item.children.length"
                                                    :style="{
                                                        transform: item.show && index === now_index ? `rotate(180deg)` : '',
                                                        transition: 'all 0.2s',
                                                        marginLeft: '8px'
                                                    }"
                                                />
                                            </el-checkbox>
                                        </div>
                                        <div
                                            class="sub-type-wrapper"
                                            v-show="index === now_index && item.show && item.children.length !== 0"
                                        >
                                            <el-checkbox-group
                                                v-model="ruleForm.apply_valid_goods_type_nos"
                                                class="sub-content"
                                                :disabled="isDisabled"
                                            >
                                                <div
                                                    class="sub-type-item"
                                                    v-for="option in item.children"
                                                    :key="option.no"
                                                >
                                                    <el-checkbox
                                                        :label="option.no"
                                                        @change="subTypeChange($event, item)"
                                                    >
                                                        {{ option.title | setNumber }}
                                                    </el-checkbox>
                                                </div>
                                            </el-checkbox-group>
                                        </div>
                                    </div>
                                </el-checkbox-group>
                            </div>
                        </el-form-item>
                        <el-form-item
                            label="活动开始后是否锁定商品信息"
                            class="is-required"
                            label-width="204px"
                        >
                            <el-radio-group
                                v-model="ruleForm.lock_goods"
                                :disabled="isDisabled"
                            >
                                <el-radio :label="1">锁定</el-radio>
                                <el-radio :label="0">不锁定</el-radio>
                            </el-radio-group>
                            <span class="form-tips">说明：选择锁定后，活动预热开始前，商家可以修改原商品信息，如果商家删除已报名的SKU，则该报名商品将会被系统自动审核不通过，活动预热开始后，商家不可以修改原商品信息，需要在活动招商规则协议告知商家。</span>
                        </el-form-item>
                        <el-form-item
                            label="活动商品是否需要包邮"
                            class="is-required"
                            label-width="204px"
                            style="margin-bottom: 36px"
                        >
                            <el-radio-group
                                v-model="ruleForm.freight_free_type"
                                class="radio-wrapper"
                                :disabled="isDisabled"
                            >
                                <div class="radio-item">
                                    <el-radio :label="0">不限制</el-radio>
                                </div>
                                <div class="radio-item">
                                    <el-radio :label="1">常规地区包邮</el-radio>
                                    <span
                                        class="form-tips"
                                        style="margin-left: 0"
                                    >说明：活动商品收货地为中国（<span style="color: #666666">不包括</span>中国香港、中国澳门、中国台湾地区及西藏，新疆，内蒙古，甘肃，广西，贵州，青海上述偏远地区）的包邮服务。</span>
                                </div>
                                <div class="radio-item">
                                    <el-radio :label="2">全国地区包邮</el-radio>
                                    <span
                                        class="form-tips"
                                        style="margin-left: 0"
                                    >说明：活动商品收货地为中国（<span style="color: #666666">包括</span>中国香港、中国澳门、中国台湾地区及西藏，新疆，内蒙古，甘肃，广西，贵州，青海上述偏远地区）的包邮服务，<span style="color: #333; text-decoration: underline">选择该选项需谨慎，以免造成资损。</span></span>
                                </div>
                            </el-radio-group>
                        </el-form-item>
                        <div class="form-title">叠加优惠和限购设置</div>
                        <el-form-item
                            label="活动可叠加优惠"
                            class="is-required"
                            label-width="204px"
                        >
                            <el-checkbox-group
                                v-model="ruleForm.order_discount_flag_list"
                                :disabled="isDisabled"
                            >
                                <el-checkbox :label="2">商家优惠券</el-checkbox>
                                <el-checkbox :label="1">商家满减</el-checkbox>
                                <el-checkbox :label="4">平台优惠券</el-checkbox>
                                <el-checkbox :label="8">平台红包</el-checkbox>
                                <el-checkbox :label="16">一卡通折扣</el-checkbox>
                            </el-checkbox-group>
                        </el-form-item>
                        <el-form-item
                            label="单个商品被审核驳回"
                            prop="re_apply_limit_count"
                            class="is-required"
                            label-width="204px"
                        >
                            <el-input
                                v-model="ruleForm.re_apply_limit_count"
                                size="medium"
                                placeholder="请输入"
                                style="width: 143px"
                                :disabled="type === 'detail' || isDisabled"
                            >
                                <span
                                    slot="suffix"
                                    style="margin-right: 6px"
                                >次</span>
                            </el-input>
                            <span style="font-size: 14px;color: #333333;margin-left: 12px">不能再次提交报名</span>
                        </el-form-item>
                        <el-form-item
                            label="活动限购设置"
                            class="is-required"
                            label-width="204px"
                        >
                            <el-radio-group
                                v-model="ruleForm.buy_limit_count_type"
                                class="radio-wrapper"
                                :disabled="isDisabled"
                            >
                                <div class="radio-item">
                                    <el-radio :label="0">本次活动限购不受限于原商品详情的限购设置</el-radio>
                                    <span
                                        class="form-tips"
                                        style="margin-left: 0"
                                    >说明：只适用于本次报名的活动限购，如果原商品详情有限购设置，则本次活动限购<span style="color: #666666; text-decoration: underline">不受限</span>于原商品详情的限购设置，只会以本次设置的活动限购数量作为限购数量标准</span>
                                </div>
                                <div class="radio-item">
                                    <el-radio :label="1">本次活动限购受限于原商品详情的限购设置</el-radio>
                                    <span
                                        class="form-tips"
                                        style="margin-left: 0"
                                    >说明：只适用于本次报名的活动限购，如果原商品详情有限购设置，则本次活动限购<span style="color: #666666; text-decoration: underline">受限</span>于原商品详情的限购设置，选择该选项，会对本次设置的活动限购数量和原商品详情的限购设置进行双重判断</span>
                                </div>
                            </el-radio-group>
                        </el-form-item>
                        <div class="form-title">活动招商协议</div>
                        <el-form-item
                            label="活动招商协议"
                            class="is-required"
                            label-width="204px"
                        >
                            <ueditor
                                :default-value="ruleForm.apply_rule_content"
                                ref="ueditor"
                                style="width: 862px"
                            />
                        </el-form-item>
                        <el-form-item label-width="204px">
                            <div class="ueditor-tips">
                                <span>注意：在输入招商协议的时候请仔细编写协议的段落样式，此处设置的段落样式、字体样式将会在商家后台报名处展示</span>
                                <el-button
                                    size="medium"
                                    @click="handlePreview"
                                >
                                    预览协议
                                </el-button>
                            </div>
                        </el-form-item>
                    </el-form>
                </div>

                <!-- button -->
                <div class="footer">
                    <el-button
                        size="medium"
                        type="default"
                        @click="handleCancel()"
                    >
                        返回
                    </el-button>
                    <el-button
                        size="medium"
                        type="primary"
                        v-if="type !== 'detail'"
                        @click="handleSubmit()"
                    >
                        保存
                    </el-button>
                    <el-button
                        size="medium"
                        type="primary"
                        v-if="type === 'detail'"
                        @click="handleEdit"
                    >
                        编辑
                    </el-button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import {back} from '@/mixin/back';
import ueditor from '@/components/common/ueditor.vue';
import {deepClone} from "@/assets/js/utils";
const numberReg = /(?:^[1-9]([0-9]+)?(?:\.[0-9]{1,2})?$)|(?:^(?:0)$)|(?:^[0-9]\.[0-9](?:[0-9])?$)/;

export default {
    name: 'ActivityManageEdit',
    data() {
        const checkActiveEndTime = (rule, value, callback) => {
            if(value > this.ruleForm.activity_start_time) {
                callback();
            } else {
                callback(new Error('结束时间不能小于开始时间'));
            }
        };

        const checkPreheatingEndTime = (rule, value, callback) => {
            if(value) {
                if(value > this.ruleForm.preheating_start_time) {
                    callback();
                } else {
                    callback(new Error('结束时间不能小于开始时间'));
                }
            } else {
                callback();
            }
        };

        const checkApplyEndTime = (rule, value, callback) => {
            if(value > this.ruleForm.apply_start_time) {
                callback();
            } else {
                callback(new Error('结束时间不能小于开始时间'));
            }
        };

        return {
            // add新增 edit编辑 detail查看
            type: 'add',
            status: '',
            ruleForm: {
                // 编辑时活动编号
                activity_no: '',
                image_url: '',
                title: '',
                apply_start_time: '',
                apply_end_time: '',
                preheating_start_time: '',
                preheating_end_time: '',
                activity_start_time: '',
                activity_end_time: '',
                // 重新报名结束时间
                re_apply_end_time: '',
                status: 1,
                // 佣金比例
                apply_commission_rate_require: '',
                // 商家提报数量限制
                apply_limit_count: '',
                // 再次提交限制
                re_apply_limit_count: '',
                // 学生价比例折扣
                apply_max_price_rate_30_days: '',
                // 限购
                buy_limit_count_type: 0,
                // 可提报类目
                apply_valid_goods_type_nos: [],
                // 是否锁定
                lock_goods: 1,
                // 运费包邮
                freight_free_type: 0,
                // 优惠叠加
                order_discount_flag_list: [1, 2, 4, 8, 16],
                // 协议
                apply_rule_content: '',
                // 预热氛围条
                goods_banner_preheating: '',
                // 活动进行种氛围条
                goods_banner_activity: '',
            },
            // 分类列表
            typeList: [],
            rules: {
                image_url: [
                    {required: true, message: '请上传活动海报', trigger: 'change'}
                ],
                title: [
                    {required: true, message: '请填写活动主题', trigger: 'blur'}
                ],
                apply_start_time: [
                    {required: true, message: '请选择商家报名开始时间', trigger: 'change'}
                ],
                apply_end_time: [
                    {required: true, message: '请选择商家报名结束时间', trigger: 'change'},
                    { validator: checkApplyEndTime, trigger: 'change' }
                ],
                preheating_end_time: [
                    { validator: checkPreheatingEndTime, trigger: 'change' }
                ],
                activity_start_time: [
                    {required: true, message: '请选择活动开始时间', trigger: 'change'}
                ],
                activity_end_time: [
                    {required: true, message: '请选择活动结束时间', trigger: 'change'},
                    { validator: checkActiveEndTime, trigger: 'change' }
                ],
                re_apply_end_time: [
                    {required: true, message: '请选择再次提交截止时间', trigger: 'change'}
                ],
                apply_limit_count: [
                    {required: true, message: '请填写单个商家提报商品数量', trigger: 'blur'},
                    {pattern: /^(0|[1-9][0-9]*|-[1-9][0-9]*)$/, message: '商品数量须为数字', trigger: 'blur'},
                ],
                apply_max_price_rate_30_days: [
                    {required: true, message: '请填写折扣', trigger: 'blur'},
                    {pattern: /^(0|[1-9][0-9]*|-[1-9][0-9]*)$/, message: '折扣须为数字', trigger: 'blur'},
                ],
                re_apply_limit_count: [
                    {required: true, message: '请填写驳回次数', trigger: 'blur'},
                    {pattern: /^(0|[1-9][0-9]*|-[1-9][0-9]*)$/, message: '驳回次数须为数字', trigger: 'blur'},
                ],
                apply_commission_rate_require: [
                    {required: true, message: '请填写商家设置佣金比例', trigger: 'blur'},
                    {pattern: numberReg, message: '佣金比例格式不正确', trigger: 'blur'},
                ],
                apply_rule_content: [
                    {required: true, message: '请填写活动招商协议', trigger: 'blur'},
                ],
                apply_valid_goods_type_nos: [
                    {required: true, message: '请勾选可参与的商品类目', trigger: 'blur'},
                ],
            },
            typeSelection: [],
            now_index: 6,
            isDisabled: false,
            authResult: {}
        };
    },
    mixins: [back],
    watch: {},
    components: {ueditor},
    mounted() {
        this.init();
        this.getTypeList();
    },
    filters: {
        setNumber (val) {
            if(val.length > 4) {
                return val.slice(0,4) + '...';
            } else {
                return val;
            }
        }
    },
    methods: {
        /**
         * @description 页面初始化
         */
        init() {
            let query = this.$route.query;

            this.$store.commit('SET_HEADER', [{title: "APP后台"}, {title: '商城'}, {
                title: '平台大促',
                path: '/student/activity-manage-list'
            }, {title: query.type === 'edit' ? '编辑活动' : query.type === 'add' ? '新建活动' : '查看活动'}]);
            this.authResult = this.$route.meta.authResult;
            this.type = query.type;
            this.status = query.status;
            // 编辑或查看时
            if (query.type === 'edit' || query.type === 'detail') {
                this.ruleForm.activity_no = query.no;
                this.getDetail();
            }
        },

        /**
         * 获取
         */
        getDetail() {
            let params = {
                activity_no: this.ruleForm.activity_no
            };

            this.$post('/student/activity%5Cget', params, resp => {
                if (resp.code === 1) {
                    let data = resp.data;

                    data.re_apply_end_time = data.re_apply_end_time * 1000;
                    data.activity_start_time = data.activity_start_time * 1000;
                    data.activity_end_time = data.activity_end_time * 1000;
                    data.apply_start_time = data.apply_start_time * 1000;
                    data.apply_end_time = data.apply_end_time * 1000;
                    data.preheating_start_time = data.preheating_start_time ? data.preheating_start_time * 1000 : '';
                    data.preheating_end_time = data.preheating_end_time ? data.preheating_end_time * 1000 : '';

                    this.ruleForm = data;
                    this.ruleForm.activity_no = this.$route.query.no;
                    this.$refs.ueditor.setContent(resp.data.apply_rule_content);
                    this.getTypeList();
                    this.isDisabled = (this.ruleForm.preheating_start_time && this.status >= 3) || (!this.ruleForm.preheating_start_time && this.status >= 5);
                } else {
                    this.$notify({
                        title: '提示',
                        message: resp.msg,
                        duration: 2000,
                        type: 'warning'
                    });
                }
            });
        },

        /**
         * @description 提交
         */
        handleSubmit() {
            this.$refs['ruleForm'].validate((valid) => {
                if (valid) {
                    this.ruleForm.apply_rule_content = this.$refs.ueditor ? this.$refs.ueditor.getUEContent() : '';
                    let params = deepClone(this.ruleForm);

                    if(!params.apply_rule_content) {
                        this.$notify({
                            title: '提示',
                            message: '活动招商协议不能为空'
                        });
                        return;
                    }

                    params.re_apply_end_time = params.re_apply_end_time / 1000;
                    params.activity_start_time = params.activity_start_time / 1000;
                    params.activity_end_time = params.activity_end_time / 1000;
                    params.apply_start_time = params.apply_start_time / 1000;
                    params.apply_end_time = params.apply_end_time / 1000;
                    params.preheating_start_time = params.preheating_start_time ? params.preheating_start_time / 1000 : '';
                    params.preheating_end_time = params.preheating_end_time ? params.preheating_end_time / 1000 : '';
                    params.order_discount_flag_list = params.order_discount_flag_list.join();
                    params.apply_valid_goods_type_nos = params.apply_valid_goods_type_nos.join();

                    this.$post('/student/activity%5Cset', params, resp => {
                        if (resp.code === 1) {
                            this.$notify({
                                title: '提示',
                                message: '保存成功',
                                duration: 2000,
                                type: 'success'
                            });
                            this.$router.push({
                                name: 'activityManageList'
                            });
                        } else {
                            this.$notify({
                                title: '提示',
                                message: resp.msg,
                                duration: 2000,
                                type: 'warning'
                            });
                        }
                    });
                }
            });
        },

        /**
         * @description 返回
         */
        handleCancel() {

            if (this.type === 'detail') {
                this.$router.push({
                    name: 'activityManageList'
                });
            } else {
                this.$zdConfirm('离开此页面后，已填写的信息将不会保存，确认离开此页面吗？', '温馨提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$router.push({
                        name: 'activityManageList'
                    });
                });
            }
        },

        /**
         * 文件上传
         * @param e
         * @param type
         */
        handleUpload(e, type) {
            let file = new FormData();

            file.append('file', e.file);
            this.$upload({
                url: '/__local/common%5Cupload',
                data: file,
                progress: e.onProgress,
                success: resp => {
                    if(resp.code === 1) {
                        this.ruleForm[type] = resp.data.url;
                    } else {
                        this.$notify({
                            title: '提示',
                            message: resp.msg,
                            duration: 2000,
                            type: 'warning'
                        });
                    }
                }
            });
        },

        /**
         * 上传图片之前 图片大小限制
         * @param file
         * @returns {boolean}
         */
        beforeUploadImage(file) {
            let type = ['image/jpeg', 'image/png', 'image/jpg'],
                isType = type.includes(file.type),
                isLt = file.size / 1024 < 500;

            if (!isType) {
                this.$notify({
                    title: '提示',
                    message: '格式仅支持jpg、jpeg、png',
                    type: 'warning',
                    duration: 2000
                });
                return false;
            }

            if (!isLt) {
                this.$notify({
                    title: '提示',
                    message: `图片大小不能超过500kb`,
                    type: 'warning',
                    duration: 2000
                });
                return false;
            }

            return isType && isLt;
        },

        /**
         * 设置为编辑状态
         * @returns {boolean}
         */
        handleEdit() {
            if(!this.authResult.auth_edit) {
                this.$notify({
                    title: '提示',
                    message: '请联系管理员添加权限',
                    type: 'warning',
                    duration: 2000
                });
                return false;
            }

            this.type = 'edit';
        },

        /**
         * @description 获取分类列表
         */
        getTypeList () {
            this.$post('/student/shop_goods_type%5Cget_list_linkage', {}, resp => {
                if (resp.code === 1) {
                    this.typeList = resp.data.list;
                    this.typeList.map(item => {
                        item.nos = item.children.map(sItem => {
                            return sItem.no;
                        });
                        item.checkedLength = this.ruleForm.apply_valid_goods_type_nos.filter(no => {
                            return item.nos.includes(no);
                        }).length;
                        if((item.checkedLength === item.nos.length) && item.children.length) {
                            this.typeSelection.push(item.no);
                        }
                    });
                }
            });
        },

        /**
         * 点击全选
         * @param event
         */
        handleCheckAll(event) {
            this.typeList.forEach((item, index) => {
                this.handleChange(event, item, index);
                if(event) {
                    this.typeSelection.push(item.no);
                } else {
                    this.typeSelection = [];
                }
            });
        },

        /**
         * 点击类目全选
         * @param event
         * @param index
         * @param item
         */
        handleChange(event, item, index) {
            if(event) {
                this.$set(item, 'checkedLength', item.nos.length);
                this.ruleForm.apply_valid_goods_type_nos = Array.from(new Set([...item.nos, ...this.ruleForm.apply_valid_goods_type_nos]));
            } else {
                this.ruleForm.apply_valid_goods_type_nos = this.ruleForm.apply_valid_goods_type_nos.filter(no => {
                    return !item.nos.includes(no);
                });
                this.$set(item, 'checkedLength', 0);
            }
        },

        /**
         * 点击显示二级分类、
         */
        handleClick(row, index) {
            if(row.show) {
                this.$set(row, 'show', false);
                this.now_index = -1;
            } else {
                this.$set(row, 'show', true);
                this.now_index = index;
            }
        },

        handleLeave(row) {
            this.$set(row, 'show', false);
            this.now_index = -1;
        },

        /**
         * 点击每一项二级分类
         * @param event
         * @param row
         */
        subTypeChange(event,row) {
            if(event) {
                this.$set(row, 'checkedLength', row.checkedLength + 1);
                if(row.checkedLength === row.nos.length) {
                    if(!this.typeSelection.includes(row.no)) {
                        this.typeSelection.push(row.no);
                    }
                }
            } else {
                this.$set(row, 'checkedLength', row.checkedLength - 1);
                if(row.checkedLength === 0) {
                    if(this.typeSelection.indexOf(row.no) !== -1) {
                        this.typeSelection.splice(this.typeSelection.indexOf(row.no), 1);
                    }
                }
            }
        },

        /**
         * 路由跳转
         * @param routeName
         * @param query
         */
        handleRoute(routeName, query) {
            this.$router.push({
                name: routeName,
                query
            });
        },

        /**
         * 预览
         */
        handlePreview() {
            let content = this.$refs.ueditor ? this.$refs.ueditor.getUEContent() : '';

            localStorage.setItem('ACTIVITY_AGREEMENT', content);
            const routeData = this.$router.resolve({
                name: 'activityAgreementPreview',
            });

            window.open(routeData.href, 'activityAgreementPreview');
        }
    }
};
</script>

<style scoped lang="less">
.wrapper {
    width: 100%;

    .content-wrapper {
        display: flex;
        height: calc(100% - 24px);
        flex-direction: column;
        position: relative;
        margin: 12px;
        background: #fff;
        box-sizing: border-box;
        overflow-y: auto;
        &::-webkit-scrollbar {
            width: 4px;
        }

        .header {
            width: 100%;
            padding: 0 32px 0 35px;
            height: 68px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            white-space: nowrap;
            box-sizing: border-box;
            color: rgba(51, 51, 51, 1);
            font-size: 20px;
            font-weight: 500;
            position: relative;
            border-bottom: 1px rgba(233, 233, 233, 1) solid;
            flex-shrink: 0;

            &::before {
                content: '';
                background: rgba(24, 144, 255, 1);
                width: 3px;
                height: 20px;
                position: absolute;
                top: 23px;
                left: 25px;
            }
            .back {
                font-size: 14px;
                font-family: PingFangSC-Medium, PingFang SC;
                font-weight: 500;
                color: #333333;
                cursor: pointer;
            }
        }
        /deep/ .el-form {
            .is-required {
                .el-form-item__label {
                    &:before {
                        content: "*";
                        display: inline-block;
                        color: #F56C6C;
                    }
                }
            }
        }

        .form-view {
            background: #FBFBFB;
            border-radius: 2px;
            border: 1px solid #EEEEEE;
            margin: 24px 32px;
            box-sizing: border-box;
            padding: 32px;

            .form-tips {
                font-size: 12px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #999999;
                margin-left: 12px;
            }

            .radio-wrapper {
                margin-top: 12px;
                .radio-item {
                    margin-bottom: 24px;
                    display: flex;
                    line-height: 18px;
                    align-items: center;
                }
            }

            .ueditor-tips {
                width: 862px;
                font-size: 12px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #FF8E39;
                display: flex;
                align-items: center;
                justify-content: space-between;
            }

            .type-wrapper {
                background: #F7F7F7;
                border-radius: 4px;
                border: 1px solid #DCDFE6;
                width: 920px;
                .type-header {
                    height: 54px;
                    padding: 0 24px;
                    border-bottom: 1px solid #DCDFE6;
                    display: flex;
                    align-items: center;
                }
                .type-content {
                    padding: 20px 24px;
                    display: flex;
                    flex-wrap: wrap;
                    .type-item {
                        width: 16.66%;
                        position: relative;
                        .type-label {
                            /*padding: 8px 12px;
                            border: 1px solid #f00;
                            border-radius: 4px;
                            background: #F7F7F7;
                            box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.16);*/
                        }
                        /deep/ .el-checkbox__label {
                            color: #999;
                        }
                        /deep/ .el-checkbox.is-checked {
                            .el-checkbox__label {
                                color: #333333;
                            }
                        }
                        .type-select-count {
                            color: #20A0FF;
                        }
                        .el-icon-caret-bottom {
                            color: #20A0FF;
                            cursor: pointer;
                        }
                        .sub-type-wrapper {
                            z-index: 999;
                            width: 218px;
                            position: absolute;
                            left: 0;
                            top: 40px;
                            display: flex;
                            flex-direction: column;
                            background: #F7F7F7;
                            box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.16);
                            padding: 8px 12px;
                            .sub-content {
                                display: flex;
                                flex-wrap: wrap;
                                .sub-type-item {
                                    width: 50%;
                                }
                            }
                        }
                    }
                }
            }

            .form-title {
                font-size: 16px;
                font-family: PingFangSC-Semibold, PingFang SC;
                font-weight: 600;
                color: #333333;
                padding-bottom: 12px;
                border-bottom: 1px solid #E9E9E9;
                margin-bottom: 24px;
            }
            .upload-view {
                display: flex;
                align-items: center;
                /deep/ .el-upload {
                    width: 469px;
                    height: 88px;
                    margin-top: 12px;

                    .el-upload-dragger {
                        width: 469px;
                        height: 88px;
                        border-radius: 4px;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        font-size: 12px;
                        .el-icon-upload {
                            font-size: 48px;
                            color: #C0C4CC;
                            margin: 0 10px 0 0;
                        }

                        .el-upload__text {
                            font-size: 14px;
                            font-family: PingFangSC-Regular, PingFang SC;
                            font-weight: 400;
                            line-height: 14px;
                        }
                    }
                }
                .el-upload__tip {
                    font-size: 12px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #999999;
                    margin-left: 12px;
                }
                img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                }
            }
        }

        /*footer*/

        .footer {
            box-sizing: border-box;
            padding-left: 176px;
            margin-top: 8px;
            margin-bottom: 52px;

            .el-button {
                width: 120px;
                margin: 0 16px 12px;
            }
        }
    }

    /deep/ .el-dialog__header {
        padding-top: 10px;
        box-shadow: 0px 1px 0px 0px rgba(233, 233, 233, 1);
        display: flex;
        align-items: center;
        background: #FAFAFA;
        border-radius: 4px 4px 0 0;

        .el-dialog__title {
            font-weight: 500;
            color: #333;
            font-size: 14px;
        }

        .el-icon-close:before {
            color: rgb(194, 194, 194);
            font-size: 17px;
            font-weight: bold;
        }

        .el-dialog__headerbtn {
            top: 14px;
        }
    }

    /deep/ .el-textarea__inner {
        resize: none;
    }

    /deep/.edui-default {
        .edui-editor {
            width: 862px!important;
        }
    }
}
</style>

